<script setup>
import UserInfoComp from '@/components/UserInfoComp.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const pages = [
  {
    title: '关于',
    url: '/about',
    icon: '/images/about.png',
  },
  {
    title: '测试首页',
    url: '/test',
    icon: '/images/about.png',
  },
  {
    title: '学习一',
    url: '/study/one',
    icon: '/images/about.png',
  },
  {
    title: '新闻管理',
    url: '/crud/news',
    icon: '/images/news.png',
  },
  {
    title: '新闻',
    url: '/crud/newsinfo',
    icon: '/images/news.png',
  },
  {
    title: '用户',
    url: '/user/main',
    icon: '/images/user.png',
  },
  {
    title: '生命周期钩子函数',
    url: '/study/two',
    icon: '/images/about.png',
  },
  {
    title: '组件知识一',
    url: '/study/three',
    icon: '/images/about.png',
  },
  {
    title: 'pinia知识一',
    url: '/study/four',
    icon: '/images/about.png',
  },
]

const toPage = page => {
  router.push(page)
}
</script>

<template>
  <UserInfoComp>
    <div>首页</div>
  </UserInfoComp>
  <hr />

  <div class="menus">
    <div v-for="d in pages" :key="d.url">
      <div>
        <img @click="toPage(d.url)" :src="d.icon" />
      </div>
      <div @click="toPage(d.url)">{{ d.title }}</div>
    </div>
  </div>
</template>

<style scoped>
.menus {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem;
}

.menus > div {
  text-align: center;
  border: 2px solid transparent;
  transition: border 0.5s;
  border-radius: 1rem;
  margin: 1rem;
}

.menus > div:hover {
  border-color: #dcdcdc;
}

.menus > div > div:first-of-type {
  width: 5rem;
  padding: 1rem;
}

.menus > div:hover > div:last-of-type {
  color: #ff0000;
}

.menus img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.5s;
  cursor: pointer;
}

.menus img:hover {
  transform: scale(1.2);
}
</style>
